<template>
	<div class="share-page">
		<el-breadcrumb separator=">">
			<el-breadcrumb-item>常用工具</el-breadcrumb-item>
			<el-breadcrumb-item :to="{ path: '/' }">数据概况</el-breadcrumb-item>
		</el-breadcrumb>
		<div class="data-page">
			<div class="data-device">
				<div class="item bg1">
					<div class="item-left"><img src="/src/assets/home/tool1.png" alt=""></div>
					<div class="item-right">
						<div class="item-right_top">138台在线设备</div>
						<div class="item-right_bottom">已开启运营的设备</div>
					</div>
					<div class="item—btn col1">查看</div>
				</div>
				<div class="item bg2">
					<div class="item-left"><img src="/src/assets/home/tool2.png" alt=""></div>
					<div class="item-right">
						<div class="item-right_top">0台离线设备</div>
						<div class="item-right_bottom">未开启运营的设备</div>
					</div>
					<div class="item—btn col2">查看</div>
				</div>
				<div class="item bg3">
					<div class="item-left"><img src="/src/assets/home/tool3.png" alt=""></div>
					<div class="item-right">
						<div class="item-right_top">2台设备缺货</div>
						<div class="item-right_bottom">请及时补充设备的货品</div>
					</div>
					<div class="item—btn col3">查看</div>
				</div>
				<div class="item bg4">
					<div class="item-left"><img src="/src/assets/home/tool4.png" alt=""></div>
					<div class="item-right">
						<div class="item-right_top">12个滞销商品</div>
						<div class="item-right_bottom">请及时调整设备中的滞销商品</div>
					</div>
					<div class="item—btn col4">查看</div>
				</div>
				<div class="item bg5">
					<div class="item-left"><img src="/src/assets/home/tool5.png" alt=""></div>
					<div class="item-right">
						<div class="item-right_top">2个异常订单</div>
						<div class="item-right_bottom">请及时处理系统中的异常订单</div>
					</div>
					<div class="item—btn col5">查看</div>
				</div>
			</div>
			<div class="situation-box">
				<div class="businessSituation">
					<div class="table">
						经营情况
					</div>
					<div class="table-item">
						<div class="table-item_left">
							<div class="left-top">昨日实收金额</div>
							<div class="left-down">￥1200.00</div>
						</div>
						<div class="table-item_right">
							<div class="right-top">今日实收金额</div>
							<div class="left-down">￥1200.00</div>
						</div>
					</div>
					<div class="table-item">
						<div class="table-item_left">
							<div class="left-top">昨日订单数</div>
							<div class="left-down">￥1200.00</div>
						</div>
						<div class="table-item_right">
							<div class="right-top">今日订单数</div>
							<div class="left-down">￥1200.00</div>
						</div>
					</div>
					<div class="table-item">
						<div class="table-item_left">
							<div class="left-top">昨日交易均价</div>
							<div class="left-down">￥1200.00</div>
						</div>
						<div class="table-item_right">
							<div class="right-top">今日交易均价</div>
							<div class="left-down">￥1200.00</div>
						</div>
					</div>
					<div class="table-item">
						<div class="table-item_left">
							<div class="left-top">昨日退款金额</div>
							<div class="left-down">￥1200.00</div>
						</div>
						<div class="table-item_right">
							<div class="right-top">今日退款金额</div>
							<div class="left-down">￥1200.00</div>
						</div>
					</div>
				</div>
				<div class="analysis">
					<div class="table">
						<div>经营分析</div>
						<div>
							<el-button type="primary"
								style="background-color: #16499C;border-color: #16499C;margin-right:10px">导出数据</el-button>
							<el-date-picker style="width:220px" v-model="value1" type="datetimerange" format="YYYY-MM-DD"
								start-placeholder="请选择" end-placeholder="请选择" />
						</div>
					</div>
					<div id="main" style="width: 100%; height: 240px"></div>
				</div>
			</div>
			<div class="salesRanking">
				<div class="table">
					<div>产品销量排行</div>
					<div>
						<el-date-picker style="width:220px" v-model="value2" type="datetimerange" format="YYYY-MM-DD"
							start-placeholder="请选择" end-placeholder="请选择" />
					</div>
				</div>
				<el-table :data="tableData" style="width: 100%">
					<el-table-column label="排名" width="100">
						<template #default="scope">
							<div class="img-style">
								{{scope.row.index}}
							</div>
						</template>
					</el-table-column>
					<el-table-column prop="commodity" label="商品" />
					<el-table-column prop="salesVolume" label="销量" />
					<el-table-column prop="grossProfit" label="毛利" />
					<el-table-column prop="grossProfitMargin" label="毛利率" />
				</el-table>
				<div class="page">
					<el-pagination v-model:current-page="currentPage1" v-model:page-size="pageSize1" :size="size" layout="prev, pager, next, jumper,total"
						:total="10" @size-change="handleSizeChange1" @current-change="handleCurrentChange1" />
				</div>
			</div>
			<div class="equipment">
				<div class="table">
					<div>设备分析</div>
					<div>
					</div>
				</div>
				<div class="box">
					<div class="box-left">
						<div>
							<div class="title">今日设备总成交额</div>
							<div class="price">￥85.00</div>
						</div>
						<div style="margin-top: 10px;">
							<div class="title">今日设备总成交量</div>
							<div class="price">￥67.00</div>
						</div>
					</div>
					<div class="box-right">
						<el-table :data="equipmentData" style="width: 100%">
							<el-table-column prop="commodity" label="设备名称" />
							<el-table-column prop="salesVolume" label="今日成交额/毛利/订单量" />
							<el-table-column prop="grossProfit" label="昨日成交额/毛利/订单量" />
							<el-table-column prop="grossProfitMargin" label="本月成交额/毛利/订单量" />
						</el-table>
					</div>
				</div>
				<div class="page">
					<el-pagination  v-model:current-page="currentPage2" v-model:page-size="pageSize2"
						:size="size" layout="prev, pager, next, jumper,total" :total="10" @size-change="handleSizeChange2"
						@current-change="handleCurrentChange2" />
				</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
	import * as echarts from "echarts";
	import { ref, onMounted } from "vue";
	import type { ComponentSize } from 'element-plus'
	const value1 = ref('')
	const value2 = ref('')
	const currentPage1 = ref(1)
	const pageSize1 = ref(1)
	const currentPage2 = ref(1)
	const pageSize2 = ref(1)
	const size = ref<ComponentSize>('small')
	const equipmentData = [
		{
			index: '1',
			commodity: '设备名称',
			salesVolume: '今日成交额',
			grossProfit: '毛昨日成交额利',
			grossProfitMargin: '本月成交额',
		},
		{
			index: '2',
			commodity: '设备名称',
			salesVolume: '今日成交额',
			grossProfit: '昨日成交额',
			grossProfitMargin: '本月成交额',
		},
		{
			index: '3',
			commodity: '设备名称',
			salesVolume: '今日成交额',
			grossProfit: '昨日成交额',
			grossProfitMargin: '本月成交额',
		},

	]
	const tableData = [
		{
			index: '1',
			commodity: '商品',
			salesVolume: '销量',
			grossProfit: '毛利',
			grossProfitMargin: '毛利率',
		},
		{
			index: '2',
			commodity: '商品',
			salesVolume: '销量',
			grossProfit: '毛利',
			grossProfitMargin: '毛利率',
		},
		{
			index: '3',
			commodity: '商品',
			salesVolume: '销量',
			grossProfit: '毛利',
			grossProfitMargin: '毛利率',
		},

	]
	const handleSizeChange1 = (val : number) => {
		console.log(`${val} items per page`)
	}
	const handleCurrentChange1 = (val : number) => {
		console.log(`current page: ${val}`)
	}
	const handleSizeChange2 = (val : number) => {
		console.log(`${val} items per page`)
	}
	const handleCurrentChange2 = (val : number) => {
		console.log(`current page: ${val}`)
	}
	onMounted(() => {
		// 基于准备好的dom，初始化echarts实例
		var myChart = echarts.init(document.getElementById("main"));

		// 绘制图表
		myChart.setOption({
			xAxis: {
				type: 'category',
				data: ['01号', '05号', '10号', '15号', '20号', '25号', '30号']
			},
			yAxis: {
				type: 'value'
			},
			legend: {
				data: ['交易额', '订单数']
			},
			grid: {
				left: '3%',
				right: '4%',
				bottom: '3%',
				containLabel: true
			},
			tooltip: {
				trigger: 'axis'
			},
			series: [
				{
					name: '订单数',
					type: 'line',
					stack: 'Total',
					itemStyle: {
						color: '#94d8f3',
					},
					data: [220, 182, 191, 234, 290, 330, 310]
				},
				{
					name: '交易额',
					type: 'line',
					stack: 'Total',
					itemStyle: {
						color: '#ff9223',
					},
					data: [120, 132, 101, 134, 90, 230, 210]
				},
			]
		});
		// 监听窗口大小变化
		window.addEventListener('resize', () => {
			if (myChart) {
				myChart.resize();
			}
		});
	});
</script>
<style>
	.data-page th{
		background-color: #ffffff !important;
		color: #000 !important;
		font-size: 13px !important;
		font-weight: 400 !important;
		text-align: center !important;
	}
</style>
<style scoped lang="scss">
	.data-page {
		background-color: #fff;
		margin-top: 20px;
		.table {
			height: 40px;
			background-color: #6d6d6d;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 10px 20px;
			color: #fff;
			font-size: 16px;

			.el-button {
				font-size: 12px;
				padding: 0 10px;
				height: 25px;
				line-height: 25px;
				border-radius: 5px;
			}
		}

		.page {
			display: flex;
			justify-content: center;
			background-color: #fff;
			padding: 5px 0;
		}

		.data-device {
			padding: 20px;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.bg1 {
				background-image: linear-gradient(to right, #ECAB15, #fccd00);
			}

			.bg2 {
				background-image: linear-gradient(to right, #2790CD, #7dccf3);
			}

			.bg3 {
				background-image: linear-gradient(to right, #49A84A, #c2db7b);
			}

			.bg4 {
				background-image: linear-gradient(to right, #E287AE, #f4b5d1);
			}

			.bg5 {
				background-image: linear-gradient(to right, #DD8020, #f8b601);
			}

			.item {
				width: 19%;
				position: relative;
				display: flex;
				align-items: center;
				padding: 15px 20px;
				border-radius: 15px;

				.item-left {
					img {
						width: 50px;
						height: 50px;
						vertical-align: middle;
					}
				}

				.item-right {
					margin-left: 10px;
					color: #fff;

					.item-right_top {
						font-size: 16px;
						font-weight: 900;
					}

					.item-right_bottom {
						font-size: 11px;
						margin-top: 2px;
					}
				}

				.item—btn {
					position: absolute;
					right: 0;
					width: 60px;
					height: 25px;
					line-height: 25px;
					text-align: center;
					background-color: #fff;
					border-radius: 15px 0 0 15px;
					font-size: 12px;
				}

				.col1 {
					color: #ECAB15;
				}

				.col2 {
					color: #2790CD;
				}

				.col3 {
					color: #49A84A;
				}

				.col4 {
					color: #E287AE;
				}

				.col5 {
					color: #DD8020;
				}
			}
		}

		.equipment {
			background-color: #F0F0F0;
			padding: 6px 0;

			.img-style {
				background-image: url("/src/assets/home/strategy2.png");
				background-size: cover;
				/* 使图片适应整个屏幕 */
				background-position: center;
				/* 居中显示 */
				background-repeat: no-repeat;
				/* 不重复平铺 */
				width: 30px;
				height: 30px;
				text-align: center;
				line-height: 30px;
			}

			.box {
				display: flex;
				align-items: center;
				background-color: #ffffff;

				.box-left {
					width: 20%;
					text-align: center;

					.title {
						font-size: 12px;
						color: #999;
					}

					.price {
						font-size: 20px;
						color: #000;
						font-weight: 900;
					}
				}

				.box-right {
					width: 80%;
				}
			}

		}

		.salesRanking {
			background-color: #F0F0F0;

			.img-style {
				background-image: url("/src/assets/home/strategy2.png");
				background-size: cover;
				/* 使图片适应整个屏幕 */
				background-position: center;
				/* 居中显示 */
				background-repeat: no-repeat;
				/* 不重复平铺 */
				width: 30px;
				height: 30px;
				text-align: center;
				line-height: 30px;
				color: #fff;
			}

		}

		.situation-box {
			display: flex;
			align-items: center;
			justify-content: space-between;
			background-color: #F0F0F0;
			padding: 6px 0;

			.analysis {
				width: 69.7%;
				background-color: #fff;
			}

			.businessSituation {
				width: 30%;
				background-color: #fff;

				.table-item {
					display: flex;
					height: 50px;
					padding: 5px 0;
					background-color: #0fffff;
					margin-top: 10px;

					.table-item_left {
						width: 50%;
						text-align: center;

						.left-top {
							font-size: 14px;
							color: #979797;
						}

						.left-down {
							font-size: 16px;
							color: #333;
							font-weight: 600;
						}
					}

					.table-item_right {
						width: 50%;
						text-align: center;

						.right-top {
							font-size: 14px;
							color: #ccc;
						}

						.left-down {
							font-size: 16px;
							color: #333;
							font-weight: 600;
						}
					}
				}

			}
		}
	}
</style>